<template>
	<view>
		<up-form labelPosition="left"  :labelStyle="labelStyle" :borderBottom="true" ref="orderForm"
			:model="form">
				<up-form-item label="原订单号" label-width="120" prop="orderDate" required :borderBottom="true">
					<up-input placeholder="请选择下单日期" type="text" class="form-field-select" v-model="form.orderSum"  disabled/>
				</up-form-item>			
				<!-- #ifdef APP-->
				<up-form-item label="下单日期" label-width="120" prop="orderDate" required :borderBottom="true"
					@tap="orderDateClick()">
					<up-input placeholder="请选择下单日期" type="text" class="form-field-select" v-model="form.orderDate"
						 readonly />
				</up-form-item>
				<!-- #endif -->
				<!-- #ifdef H5-->
				<up-form-item label="下单日期" label-width="120" prop="orderDate" required :borderBottom="true">
					<up-input placeholder="请选择下单日期" type="text" class="form-field-select"
						@click.native="orderDateShow=true" v-model="form.orderDate"  @focus='blur' />
				</up-form-item>
				<!-- #endif -->
				<up-form-item label="销售类型" label-width="120" prop="sample" required :borderBottom="true">
					<up-radio-group v-model="form.sample" shape="square">
						<up-radio v-for="(item, index) in saleTypeList" :key="index" :name="item" :label="item"
							:customStyle="{marginLeft: '15rpx'}" activeColor="green">
						</up-radio>
					</up-radio-group>
				</up-form-item>
				<up-form-item label="发货方式" label-width="120" prop="choiceCar" required :borderBottom="true">
					<up-radio-group v-model="form.choiceCar" shape="square">
						<up-radio v-for="(item, index) in choiceCarList" :key="index" :name="item" :label="item"
							:customStyle="{marginLeft: '15rpx'}" activeColor="green">
						</up-radio>
					</up-radio-group>
				</up-form-item>
				<!-- #ifdef APP-->
				<up-form-item label="发货日期" label-width="120" prop="pickDate" required :borderBottom="true"
					@tap="pickDateShow = true">
					<up-input placeholder="请选择发货日期" type="text" class="form-field-select" v-model="form.pickDate"
						 readonly />
				</up-form-item>
				<up-form-item label="部门" label-width="120" prop="department" required :borderBottom="true"
					@tap='departmentShow=true'>
					<up-input placeholder="请选择部门" type="text" class="form-field-select" v-model="form.department"
						 readonly />
				</up-form-item>
				<up-form-item label="客户名称" label-width="120" prop="customerName" required :borderBottom="true"
					@tap='customerShowClick'>
					<up-input placeholder="请选择客户" type="text" class="form-field-select" v-model="form.customerName"
						 readonly />
				</up-form-item>
				<!-- #endif -->
				<!-- #ifdef H5-->
				<up-form-item label="发货日期" label-width="120" prop="pickDate" required :borderBottom="true">
					<up-input placeholder="请选择发货日期" type="text" class="form-field-select"
						@click.native="pickDateShow = true" v-model="form.pickDate"  @focus='blur' />
				</up-form-item>
				<up-form-item label="部门" label-width="120" prop="department" required :borderBottom="true">
					<up-input placeholder="请选择部门" type="text" class="form-field-select" v-model="form.department"
						@click.native='departmentShow=true' @focus='blur' />
				</up-form-item>
				<up-form-item label="客户名称" label-width="120" prop="customerName" required :borderBottom="true">
					<up-input placeholder="请选择客户" type="text" class="form-field-select" v-model="form.customerName"
						@click.native='customerShowClick' @focus='blur' />
				</up-form-item>
				<!-- #endif -->
				<up-form-item label="付款账期" label-width="120" prop="accountPeriod" required :borderBottom="true">
					<up-radio-group v-model="form.accountPeriod" shape="square">
						<up-radio v-for="(item, index) in accountPeriodList" :key="index" :name="item" :label="item"
							activeColor="green" :customStyle="{marginLeft: '15rpx'}"></up-radio>
					</up-radio-group>
				</up-form-item>
				<up-form-item label="销售人员" label-width="120" prop="salesPerson" required :borderBottom="true">
					<up-input placeholder="请填写销售人员" type="text" class="form-field-select" v-model="form.salesPerson"
						 />
				</up-form-item>
				<up-form-item label="所在区域" label-width="120" prop="area" required :borderBottom="true">
					<up-radio-group v-model="form.area" shape="square">
						<up-radio v-for="(item, index) in areList" :key="index" :name="item" :label="item" :customStyle="{marginLeft: '15rpx'}"
							activeColor="green"></up-radio>
					</up-radio-group>
				</up-form-item>
				<up-form-item label="收货人" label-width="120" prop="customerTake" required :borderBottom="true">
					<up-input placeholder="请填写收货人" type="text" class="form-field-select" v-model="form.customerTake"
						 />
				</up-form-item>
				<up-form-item label="收货人电话" label-width="120" prop="customerPhone" required :borderBottom="true">
					<up-input placeholder="请填写收货人电话" type="text" class="form-field-select" v-model="form.customerPhone"
						 />
				</up-form-item>
				<!-- #ifdef APP -->
				<up-form-item label="收货人地址" label-width="120" prop="pcaAddress" required :borderBottom="true" @tap="cityShow=true">
					<up-input placeholder="请填写收货人地址" type="text" class="form-field-select" v-model="form.pcaAddress" readonly/>
				</up-form-item>				
				<!-- #endif -->
                <!-- #ifdef H5 -->
				<up-form-item label="收货人地址" label-width="120" prop="pcaAddress" required :borderBottom="true">
					<up-input placeholder="请填写收货人地址" type="text" class="form-field-select" v-model="form.pcaAddress"
						@click.native="cityShow=true"  @focus="blur"/>
				</up-form-item>		                
                <!-- #endif -->
				<up-form-item label="收货人详细地址" label-width="120" prop="customerAddress" required :borderBottom="true">
					<up-input placeholder="请填写收货人详细地址" type="text" class="form-field-select"
						v-model="form.customerAddress"  />
				</up-form-item>
				<up-form-item label="客户形式" label-width="120" prop="customerForm" required :borderBottom="true">
					<up-input placeholder="请填写客户形式" type="text" class="form-field-select" v-model="form.customerForm"
						 />
				</up-form-item>
				<up-form-item label="客户付款方式" label-width="120" prop="customerPay" required :borderBottom="true">
					<up-radio-group v-model="form.customerPay" shape="square">
						<up-radio v-for="(item, index) in customerPayList" :key="index" :name="item" :label="item" :customStyle="{marginLeft: '15rpx'}"
							activeColor="green"></up-radio>
					</up-radio-group>
				</up-form-item>
				<up-form-item label="客户付款账号" label-width="120" prop="customerAccount" required :borderBottom="true">
					<up-input placeholder="请填写客户付款账号" type="text" class="form-field-select"
						v-model="form.customerAccount"  />
				</up-form-item>
				<up-form-item label="是否开票" label-width="120" prop="isInvoicing" required :borderBottom="true">
					<up-radio-group v-model="form.isInvoicing" shape="square">
						<up-radio :key="0" :name="1" label="是" :customStyle="{marginLeft: '15rpx'}"
							activeColor="green" />
						<up-radio :key="1" :name="0" label="否" :customStyle="{marginLeft: '15rpx'}"
							activeColor="green" />
					</up-radio-group>
				</up-form-item>
				<up-form-item label="是否押车" label-width="120" prop="isUnloading" required :borderBottom="true">
					<up-radio-group v-model="form.isUnloading" shape="square">
						<up-radio :key="0" :name="1" label="是" :customStyle="{marginLeft: '15rpx'}"
							activeColor="green" />
						<up-radio :key="1" :name="0" label="否" :customStyle="{marginLeft: '15rpx'}"
							activeColor="green" />
					</up-radio-group>
				</up-form-item>
				<up-form-item label="押车天数" label-width="120" prop="unloadingDays" :required="form.isUnloading == 1"
					:borderBottom="true">
					<up-input placeholder="请填写押车天数" type="number" class="form-field-select"
						:disabled="form.isUnloading == 0" v-model="form.unloadingDays"  />
				</up-form-item>
				<up-form-item label="预计押车费用" label-width="120" prop="unloadingFare" :required="form.isUnloading == 1"
					:borderBottom="true">
					<up-input placeholder="请填写预计押车费用" type="number" class="form-field-select"
						:disabled="form.isUnloading == 0" v-model="form.unloadingFare"  />
				</up-form-item>
				<up-form-item label="是否加急" label-width="120" prop="isUrgent" required :borderBottom="true">
					<up-radio-group v-model="form.isUrgent" shape="square">
						<up-radio :key="0" :name="1" label="是" :customStyle="{marginLeft: '15rpx'}"
							activeColor="green" />
						<up-radio :key="1" :name="0" label="否" :customStyle="{marginLeft: '15rpx'}"
							activeColor="green" />
					</up-radio-group>
				</up-form-item>
				<up-form-item label="备注" label-width="120" :borderBottom="true">
					<up-input placeholder="请填写备注" type="textarea" class="form-field-select" v-model="form.remake"
						 />
				</up-form-item>
				<up-form-item label="相关图片" label-width="120" :borderBottom="true">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10" disabled></u-upload>
				</up-form-item>
				<up-form-item label="相关文件" label-width="120" :borderBottom="true">
					<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple
						:maxCount="10" disabled></u-upload>
				</up-form-item>
		</up-form>
		
		<view style="display: flex;margin-top: 10rpx;">
			<u-button type="primary" shape="circle" text="保存换单数据"
				style="margin: 0px 5px 10px 10px;" @click="save"></u-button>

		</view>
		<!-- 下单日期 -->
		<u-calendar :show="orderDateShow" mode="single" @confirm="orderDateChange" @close="orderDateShow=false"
			:minDate="minDate" :maxDate="maxDate" :monthNum="12"></u-calendar>
		
		<!-- 发货日期 -->
		<u-calendar :show="pickDateShow" mode="single" @confirm="pickDateChange" @close="pickDateShow=false"
			:minDate="minDate" :maxDate="maxDate" :monthNum="12"></u-calendar>
		
		<!-- 部门联动 -->
		<u-picker :show="departmentShow" :columns="departmentColumns" keyName="departmentName"
			@confirm="departmentConfirm" @close="departmentClose" @cancel="departmentClose"
			closeOnClickOverlay></u-picker>
		
		<!-- 客户联动 -->
		<!-- 		<u-picker :show="customerShow" :columns="customerColumns" @confirm="customerConfirm" @close="customerClose"
			@cancel="customerClose" closeOnClickOverlay></u-picker> -->
		<lzcPicker ref="lzcPicker" @change="customerConfirm" :pickerList="customerColumns"
			pickerTittle='选择客户(点击客户姓名即可)' />
		
		<!-- 省市区 -->
		<cityPicker :column="cityColumn" :default-value="cityDefaultValue" @cancel="cityCancel" @confirm="cityConfirm"
			:visible="cityShow" />
			
		<!-- 请输入换单理由 -->	
		<up-modal :show="popupShow" title="请输入换单理由" :showConfirmButton="false">
			<view style="width: 100%;">
				<up-textarea v-model="changeReason" placeholder="请输入内容"></up-textarea>
				<view style="display: flex;">
					<u-button  text="取消" type="error" shape="circle" plain
						@click="popupShow=false"></u-button>
					<u-button slot="confirmButton" text="确定" type="primary" shape="circle" plain
						@click="confirmReason"></u-button>
				</view>
			</view>
		</up-modal>	
	</view>
</template>

<script>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker';
	import lzcPicker from '@/components/lzc-picker/lzc-picker.vue';
	import departmentApi from '@/apis/gyl/department.js';
	import customerApi from '@/apis/gyl/customer.js';
	import baseApi from '@/apis/gyl/base.js';
	import orderApi from '@/apis/gyl/order.js';
	export default {
		components: {
			cityPicker,
			lzcPicker,
		},
		props:{
			data:{
				type:Object,
				default:{}
			}
		},
		data() {
			return {
				changeReason:null,
				popupShow:false,
				form:{
					id: null,
					orderDate: null,
					sample: null,
					choiceCar: null,
					pickDate: null,
					department: null,
					customerName: null,
					accountPeriod: null,
					salesPerson: null,
					area: null,
					customerId: null,
					customerTake: null,
					customerPhone: null,
					pcaAddress: null,
					textProvince: null,
					textCity: null,
					textArea: null,
					customerAddress: null,
					customerForm: null,
					customerPay: null,
					customerAccount: null,
					isUnloading: 0,
					unloadingDays: null,
					unloadingFare: null,
					isInvoicing: 0,
					isUrgent: 0,
					remake: null,
					orderImage: null, //相关图片
					orderText: null, //相关文件
					changeReason:null
				},
				labelStyle: {
					color: '#aaa',
					fontSize: '30rpx'
				},
				orderDateShow:false,
				minDate: '2024-12-01',
				maxDate: '2035-01-01',				
				pickDateShow:false,
				cityShow:false,
				departmentShow: false, //控制部门展示
				departmentColumns: [], //部门列表
				customerShow: false, //控制客户展示
				customerList: [], //源客户列表
				customerColumns: [], //客户列表
				saleTypeList: ['销售', '样品'],
				choiceCarList: ['供应链车辆', '客户自提', '快递'],
				cityColumn: 3,
				accountPeriodList: ['发货前付款', '货到付款', '账期7天', '账期15天', '账期30天'],
				customerPayList: ['对公账户', '个人扫码', '转账'],
				areList: [],
				cityDefaultValue: '',
				isUnloadingList: [{
					value: 1,
					name: "是"
				}, {
					value: 0,
					name: "否"
				}],
				isInvoicingList: [{
					value: 1,
					name: "是"
				}, {
					value: 0,
					name: "否"
				}],
				isUrgentList: [{
					value: 1,
					name: "是"
				}, {
					value: 0,
					name: "否"
				}],
				fileList1:[],
				fileList2:[],
				customerRules: {
					orderDate: [{
						required: true,
						message: '请选择下单日期',
						trigger: ['blur', 'change']
					}],
					sample: [{
						required: true,
						message: '请选择销售类型',
						trigger: ['blur', 'change']
					}],
					choiceCar: [{
						required: true,
						message: '请选择发货方式',
						trigger: ['blur', 'change']
					}],
					pickDate: [{
						required: true,
						message: '请选择发货日期',
						trigger: ['blur', 'change']
					}],
					department: [{
						required: true,
						message: '请选择部门',
						trigger: ['blur', 'change']
					}],
					customerName: [{
						required: true,
						message: '请选择客户',
						trigger: ['blur', 'change']
					}],
					accountPeriod: [{
						required: true,
						message: '请选择付款账期',
						trigger: ['blur', 'change']
					}],
					salesPerson: [{
						required: true,
						message: '请填写销售人员',
						trigger: ['blur', 'change']
					}],
					area: [{
						required: true,
						message: '请选择所在区域',
						trigger: ['blur', 'change']
					}],
					customerTake: [{
						required: true,
						message: '请填写收货人',
						trigger: ['blur', 'change']
					}],
					customerPhone: [{
						required: true,
						message: '请填写收货人电话',
						trigger: ['blur', 'change']
					}],
					pcaAddress: [{
						required: true,
						message: '请填写收货人地址',
						trigger: ['blur', 'change']
					}],
					customerAddress: [{
						required: true,
						message: '请填写收货人详细地址',
						trigger: ['blur', 'change']
					}],
					customerForm: [{
						required: true,
						message: '请填写客户形式',
						trigger: ['blur', 'change']
					}],
					customerPay: [{
						required: true,
						message: '请选择付款方式',
						trigger: ['blur', 'change']
					}],
					customerAccount: [{
						required: true,
						message: '请填写客户付款账号',
						trigger: ['blur', 'change']
					}],
					unloadingDays: [{
						validator: (rule, value, callback) => {
						    
							if (this.form.isUnloading == 0) {
								return true;
							}
							console.info(this.form)
							return this.form.isUnloading == 1 && this.form.unloadingDays != null  && this.form.unloadingDays != '';
						},
						required: true,
						message: '请填写押车天数',
						trigger: ['blur', 'change']
					}],
					unloadingFare: [{
						validator: (rule, value, callback) => {
							if (this.form.isUnloading == 0) {
								return true;
							}
							return this.form.isUnloading == 1 && this.form.unloadingFare != null  && this.form.unloadingFare != '';
						},
						required: true,
						message: '请填写预计押车费用',
						trigger: ['blur', 'change']
					}]
				},
			}
		},
		methods: {
			
			/**
			 * 用于app下展示下单日期校验规则,兼容键盘弹出的bug
			 */
			orderDateClick() {
				this.orderDateShow = true;
				this.$refs.orderForm.validateField('orderDate');
			},
			
			/**
			 * 禁止弹出
			 */
			async blur() {
				await uni.hideKeyboard();
			},
			
			/**删除图片
			 * @param {Object} event
			 */
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			
			/**
			 * 下单日期
			 * @param {Object} e
			 */
			orderDateChange(e) {
				this.form.orderDate = e[0]
				this.orderDateShow = false;
				this.$refs.orderForm.validateField('orderDate')
			},
			
			/**
			 * 发货日期
			 * @param {Object} e
			 */
			pickDateChange(e) {
				this.form.pickDate = e[0]
				this.pickDateShow = false;
				this.$refs.orderForm.validateField('pickDate');
			},
			
			/**
			 * 部门确定
			 * @param {Object} e
			 */
			departmentConfirm(e) {
				console.info(e)
				this.form.department = e.value[0].departmentName; //获取选择的数据
				this.departmentShow = false;
				this.$refs.orderForm.validateField('department');
			},
			
			/**
			 * 部门取消
			 */
			departmentClose() {
				this.departmentShow = false;
			},
			
			/**
			 * 客户确定
			 * @param {Object} e
			 */
			customerConfirm(index) {
				this.customerShow = false;
				const customer = this.customerList[index];
				this.form.area = customer.department;
				this.form.customerId = customer.customerId;
				this.form.salesPerson = customer.salePerson;
				this.form.customerName = customer.customerName;
				this.form.customerTake = customer.customerTake;
				this.form.customerPhone = customer.customerPhone;
				this.form.customerAddress = customer.customerAddress;
				this.form.customerForm = customer.customerForm;
				this.form.customerPay = customer.customerPay;
				this.form.customerAccount = customer.customerAccount;
				this.form.accountPeriod = customer.accountPeriod;
				this.form.isInvoicing = customer.isInvoicing;
				this.form.textProvince = customer.textProvince;
				this.form.textCity = customer.textCity;
				this.form.textArea = customer.textArea;
				this.form.pcaAddress = customer.textProvince + "/" + customer.textCity + "/" + customer.textArea;
				this.$refs.orderForm.validateField('customerName');
				this.$refs.orderForm.validateField('accountPeriod');
				this.$refs.orderForm.validateField('area');
				this.$refs.orderForm.validateField('customerPay');
			},
			
			/**
			 * 省市区取消
			 */
			cityCancel() {
				this.cityShow = false;
			},
			
			/**省市区确认
			 * @param {Object} e
			 */
			cityConfirm(e) {
				this.form.textProvince = e.provinceName;
				this.form.textCity = e.cityName;
				this.form.textArea = e.areaName;
				this.form.pcaAddress = e.provinceName + "/" + e.cityName + "/" + e.areaName;
				this.cityCancel();
			},
			
			/**
			 * 新增图片
			 */
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			
			/**
			 * 换单
			 */
			async save(){
				await this.$refs.orderForm.validate().then(res => {
                   this.popupShow = true;
				}).catch(errors => {
					uni.$u.toast(errors[0].message)
				})
			},
			
			confirmReason(){
				this.form.changeReason = this.changeReason;
				this.changeOrder();
			},
			/**
			 * 客户展示
			 */
			customerShowClick() {
				this.$refs.lzcPicker.handleShow();
			},
			
			// ------------------------------------------------------------------api---------------------------------------------------------------
			/**
			 * 获取所在区域
			 */
			async getAreaListApi() {
				const res = await baseApi.listArea();
				if (res.success) {
					this.areList = res.data.map(item => item.regionName);
				}
			},
			
			/**
			 * 获取客户列表
			 */
			async getCustomerListApi() {
				var query = {
					pageNo: 1,
					pageSize: 1000
				};
				const res = await customerApi.listCustomer(query);
				if (res.success) {
					const list = res.data;
					this.customerList = res.data;
					const customerList = list.map((item, index) => ({
						customerName: item.customerName,
						index: index
					}));
					// this.customerColumns.push(customerList);
					this.customerColumns = customerList;
				}
			},
			
			/**
			 * 获取部门数据
			 */
			async getDepartmentListApi() {
				const res = await departmentApi.listNoTree();
				if (res.success) {
					const list = res.data;
					// const departmentColumns = list.map(item => item.departmentName);
					this.departmentColumns.push(list);
				}
			},
			
			async changeOrder(){
				const res = await orderApi.changeOrder(this.form);
				if(res.success){
					this.popupShow = false;
					uni.showToast({
						icon: 'none',
						duration: 3000,
						title: '换单成功'
					});
					uni.navigateBack();
				}else{
					uni.showToast({
						icon: 'none',
						duration: 3000,
						title: '换单失败'
					});
				}
			}
		},
		mounted() {
            this.$refs.orderForm.setRules(this.customerRules);
			this.getAreaListApi();
			this.getCustomerListApi();
			this.getDepartmentListApi();
		},
		updated() {
			console.info("huandan updated")
			this.form = this.data;
			this.form.pcaAddress = this.form.textProvince + "/" + this.form.textCity + "/" + this.form.textArea;
		}
	}
</script>

<style scoped>
	.u-radio-group {
		gap: 0px !important;
	}
	::v-deep .u-cell__value {
		text-align: left !important;
		width: 60% !important;
	}
.apply-form-field {
		background: #ffffff;

		.input-placeholder {
			text-align: left !important;
			font-size: 28rpx;
		}

		.uni-input-input {
			text-align: left !important;
		}

		.form-field-select {
			.u-iconfont {
				font-size: 0 !important;
			}
		}

		.add-user {
			color: #bfbfbf;
			font-size: 30px;
		}

		.apply-name {
			color: #333333;
			line-height: 20px;

			span {
				color: #999999;
				display: block;

			}
		}

		.apply-link {
			.u-link {
				color: #5ab149 !important;
				padding: 0 5px;
			}
		}

		.u-close--top-right {
			top: 5px !important;
		}

		.popup-title {
			color: #333333;
			padding: 5px 10px;
			font-size: 30rpx;
		}

		.u-cell {
			padding: 8px 12px !important;
		}

	}
	::v-deep .u-textarea__field {
		border: 1px solid #d8d2d0 !important;
	}
</style>
